<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>修改绑定手机号</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #f6f6f6;
				min-height: 100vh;
				font-size: 0.373rem;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			body input[type='text'],
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			.clear {
				clear: both;
				height: 0;
				font-size: 0;
				line-height: 0;
				visibility: hidden;
				overflow: hidden;
			}
			/*顶部*/
			
			.my_login_li {
				background: #fff;
				padding: 0 0.373rem;
				display: flex;
				line-height: 1.333rem;
				border-bottom: 1px solid #e2e2e2;
				justify-content: center;
				align-items: center;
			}
			
			.my_login_li span {
				padding-left: 0.373rem;
				width: 3rem;
				text-align: left;
			}
			
			.my_login_li input {
				border: 0;
				line-height: 1.333rem;
				height: 1.333rem;
				color: #888888;
			}
			
			.my_login_li .login-num-btn {
				width: 2.893rem;
				border: 1px #888888 solid;
				height: 0.786rem;
				line-height: 0.786rem;
				padding: 0 0.2rem;
			}
			
			.my_content {
				background: #f6f6f6;
			}
			
			.my_login {
				padding-top: 0.253rem;
			}
			
			.my_content button {
				background: url(../images/my_buttom.png) no-repeat;
				color: #FFFFFF;
				line-height: 1.266rem;
				height: 1.266rem;
				width: 100%;
				padding: 0;
				box-sizing: border-box;
				background-size: 100% 100%;
				border: 0;
			}
			
			.my_butn {
				margin: 1.093rem 0.373rem;
			}
			
			.my_login_li .classcolor {
				background: #000;
				width: 2.893rem;
				border: 1px #888888 solid;
				height: 0.786rem;
				line-height: 0.786rem;
				padding: 0 0.2rem;
			}
			
			.my_login_li input[type='text'] {
				font-size: 0.373rem;
			}
			 #phone {
			 	color: #000000 !important;
			 }
		</style>
	</head>

	<body>
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">验证旧手机号</h1>
		</header>
		<div class="my_content mui-content">
			<div class="mu_login-all" id="my_login">
				<ul class="my_login">
					<li class="my_login_li">
						<span>手机号</span>
						<input type="text" v-model="user.phone" disabled="disabled" id="phone" placeholder="请输入旧手机号" /> 
					</li>
					<li class="my_login_li">
						<span>验证码</span>
						<input type="text" v-model="code" placeholder="请输入验证码" style="padding: 0 0.6rem;" />
						<input class="login-num-btn" name="color" type="button" value="获取验证码" />

					</li>
				</ul>
				<div class="my_butn" @click="confirm_bind"><button>确认绑定</button></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			
			var app = new Vue({
				el:'.mui-content',
				data:{
					phone:'',
					code:'',
					server_code:'',
					user:''
				},
				methods:{
					confirm_bind:function(){
						if(this.code==this.server_code){
							mui.openWindow({
								url:'my_login2.html',
								id:'my_login2.html',
								createNew:true
							})
						}else{
							mui.toast("验证码错误")
						}
					}
				},
				mounted:function(){
					var user = localStorage.getItem('user');
					if(user){
						user = JSON.parse(user);
						this.user  = user;
					}
					bind_get_code_btn();
					
				}
			})
			
			
			
			
			function bind_get_code_btn() {
				mui('#my_login').on('tap', '.login-num-btn', function() {
					
					 
					var colorEl = document.querySelector('input[name="color"]');
					colorEl.disabled = 'disable';
					colorEl.className = 'classcolor';
					var time = 60;
					var set = setInterval(function() {
						if(time == 0) {
							colorEl.disabled = ''
							colorEl.value = '重新获取'
							colorEl.className = 'login-num-btn';
							clearInterval(set);
						} else {
							time--
							colorEl.value = time
						}
					}, 1000);
					 
					$.ajax({
						type:"get",
						url:"https://zhapp.4hl.cn/api/User/checkcode",
						data:{
							phone:app.user.phone
						},
						success:function(res){
							 
							console.log(res)
							res = $.trim(res);
							app.server_code = res;
						},
						error:function(){
						 
						}
						
					});

				});
			}
		</script>
	</body>

</html>